<template>
  <div class="yuncun" v-if="getYunCunKTV.length !== 0">
    <div class="title">
      <span>云村KTV</span><router-link to="#">更多 &gt;</router-link>
    </div>

    <div class="wrap">
      <div class="music" v-for="(v, i) in getYunCunKTV" :key="i">
        <p class="musicName">
          <i class="iconfont icon-yinpinpianduan"></i
          ><marquee
            ><span>{{ v.roomtitle }}</span></marquee
          >
        </p>
        <p class="note">{{ v.roomtitle }}</p>
        <img :src="v.picture" />
        <p class="person">房间号：{{ v.roomnum }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getlink } from "@/api/getlink";
export default {
  created() {
    getlink("/wjmz/load/YunCun").then((res) => {
      this.getYunCunKTV = res.data;
    });
  },
  data() {
    return {
      getYunCunKTV: [],
    };
  },
  // computed: {
  //   getYunCunKTV() {
  //     return this.$store.state.home.yunCunKTV;
  //   },
  // },
};
</script>

<style scoped>
.yuncun {
  width: 100%;
  height: 4.57rem;
  border-radius: 0.15rem;
  background-color: #fff;
  padding: 0.46rem 0 0 0.34rem;
  margin-bottom: 0.2rem;
}

.yuncun .title {
  width: 100%;
  height: 0.5rem;
  padding-right: 0.34rem;
  margin-bottom: 0.33rem;
}

.yuncun .title span {
  float: left;
  font-size: 0.35rem;
  line-height: 0.5rem;
  font-weight: bold;
}

.yuncun .title a {
  float: right;
  width: 1.1rem;
  height: 0.5rem;
  font-size: 0.24rem;
  text-align: center;
  line-height: 0.5rem;
  border: 1px solid #e8e8e8;
  border-radius: 0.25rem;
}

.yuncun .wrap {
  display: flex;
  overflow-x: auto;
}

.yuncun .wrap .music {
  flex-shrink: 0;
  width: 2.07rem;
  height: 2.9rem;
  color: #fff;
  border-radius: 0.15rem;
  padding: 0.22rem 0.14rem 0.18rem 0.15rem;
  margin-right: 0.2rem;
  position: relative;
}

.yuncun .wrap .music:nth-of-type(n) {
  background-color: rgb(253, 153, 155);
}

.yuncun .wrap .music:nth-of-type(2n) {
  background-color: rgb(133, 215, 167);
}

.yuncun .wrap .music:nth-of-type(3n) {
  background-color: rgb(155, 162, 253);
}

.yuncun .wrap .music:nth-of-type(4n) {
  background-color: rgb(220, 168, 251);
}

.yuncun .wrap .music .musicName {
  height: 0.22rem;
  font-size: 0.22rem;
  line-height: 0.22rem;
  overflow-x: auto;
  margin-bottom: 0.13rem;
}

.yuncun .wrap .music .musicName .iconfont {
  vertical-align: middle;
  margin-right: 0.12rem;
}

.yuncun .wrap .music .musicName marquee {
  vertical-align: middle;
  width: 1.2rem;
  line-height: 0.22rem;
}

.yuncun .wrap .music .note {
  font-size: 0.26rem;
  font-weight: bold;
  line-height: 0.4rem;
}

.yuncun .wrap .music img {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  position: absolute;
  bottom: 0.57rem;
  left: 0.53rem;
}

.yuncun .wrap .music .person {
  font-size: 0.24rem;
  font-weight: bold;
  position: absolute;
  bottom: 0.14rem;
  right: 0.14rem;
}

/*隐藏滚动条*/
::-webkit-scrollbar {
  display: none;
}
</style>
